import React, { Component } from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { global as globalDuck } from 'ducks'
import ListTable from 'components/ListTable'
import getProjectPageInfo from 'graphql/org/projectPageInfo.graphql'
import getProject from 'graphql/org/projectByOrgName.graphql'
import Icons from 'utils/constents/icons'
import { PaddingContainer } from 'components/containers'

const dataOpts = [
  {
    src: Icons.EDIT,
    text: '编辑',
  },
  {
    src: Icons.DELETE,
    text: '删除',
  },
]

const FileList = orgName => ({ data }) => (
  <React.Fragment>
    {data.project_member.map(project => (
      <ListTable.Row hasCheckBox>
        <ListTable.Link src={`/project/${orgName}/${project.project_object.name}`}>{project.project_object.name}</ListTable.Link>
        <ListTable.Cell>{project.project_object.description}</ListTable.Cell>
        <ListTable.Cell>{project.project_object.create_at}</ListTable.Cell>
      </ListTable.Row>
    ))}
  </React.Fragment>
)

class DatasetData extends Component {
  componentDidMount() {
    const { setParentActiveItem } = this.props
    setParentActiveItem('project')
  }

  render() {
    const { org, user } = this.props
    const orgName = org.owner_object.name
    const { role } = org
    const RenderList = FileList(orgName)
    const inviteUrl = `/org/${orgName}/newProject`
    const globalActions = role === 'admin' || role === 'owner'
      ? [
        {
          text: '创建项目',
          url: inviteUrl,
        },
      ]
      : []
    const navSections = [
      {
        path: orgName,
        text: orgName,
      },
      {
        path: `${orgName}/project`,
        text: '项目列表',
      },
    ]
    return (
      <PaddingContainer>
        <ListTable
          nav={{
            path: '',
            homeText: '组织列表',
            homePath: '/org',
            defaultSections: navSections,
          }}
          globalActions={ globalActions }
          search={{ text: '搜索项目' }}
          pagination={{
            query: getProjectPageInfo,
            name: 'project_member_aggregate',
            variables: {
              orgName,
              userId: user.id,
            },
          }}
          listData={{
            query: getProject,
            variables: {
              orgName,
              userId: user.id,
              limit: 10,
            },
            header: (
              <ListTable.Header hasCheckBox>
                <ListTable.HeaderCell>名称</ListTable.HeaderCell>
                <ListTable.HeaderCell>项目说明</ListTable.HeaderCell>
                <ListTable.HeaderCell>创建时间</ListTable.HeaderCell>
              </ListTable.Header>
            ),
            render: <RenderList />,
          }}
          holder={{
            description: `没有加入${orgName}的任何项目`,
          }}
        />
      </PaddingContainer>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: path => push(path),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DatasetData)
